<template>
  <div class="CarModelFotaSearchWrap table-page-search-wrapper">
    <a-form-model ref="formComp" :model="queryParams" style="flex:1 0 0;">
      <a-row :gutter="[8,16]">
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="12"
          :xl="8"
          :xxl="5"
          style="height:53px;"
        >
          <!-- 零件搜索 -->
          <part-soft-select
            mode="multiple"
            style="width:100%;"
            :default-value="queryParams.ecuIds"
            :query="ecuSelectQuery"
            :hasAll="false"
            :clear="true"
            @changeoption="changeOption($event,'ecuIds')"
            :onlyShowName="true"
          ></part-soft-select>
        </a-col>
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="12"
          :xl="10"
          :xxl="7"
          style="height:53px;"
        >
          <!-- 任务搜索 -->
          <task-select
            mode="multiple"
            style="width:100%;"
            :default-task-id="queryParams.taskIds"
            :query="partSoftQuery"
            :hasAll="false"
            :clear="true"
            @changeoption="changeOption($event,'taskIds')"
          ></task-select>
        </a-col>
        <!-- 车辆版本 -->
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="12"
          :xl="6"
          :xxl="4"
          style="height:53px;"
        >
          <vehicle-version-select
            ref="vehicleVersionSelect"
            style="width:100%;"
            :query="vehicleVersionQuery"
            v-model="queryParams.vehicleVersion"
            :replaceFields="{id:'id',value:'name',title:'name'}"
            :clear="true"
            @changeoption="changeOption($event, 'vehicleVersion')"
          ></vehicle-version-select>
        </a-col>
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="12"
          :xl="5"
          :xxl="3">
          <!-- 状态搜索 -->
          <part-update-state-select
            mode="default"
            style="width:100%"
            :default-value="queryParams.status"
            :hasAll="true"
            @changeoption="changeOption($event,'status')"
          ></part-update-state-select>
        </a-col>
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="12"
          :xl="10"
          :xxl="5">
          <div class="searchBtns">
            <a-button @click="handleSearch" >
              {{ $t('inquiry') }}
            </a-button>
            <a-button @click="clearCondition">
              {{ $t('clear') }}
            </a-button>
            <a-button @click="changeShowViewType" class="alterView">
              <i
                class="iconfont"
                :class="[updateInfoView === 'timeline' ? 'icon-liebiaoshitu1' : 'icon-shijianzhou1']"></i>
            </a-button>
          </div>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>
<script>
import FilterBoxCollection from '@/components/SelfComponents/FilterBoxCollection'
import VehicleTypeSelect from '@/views/components/VehicleTypeSelect'
import VehicleModelSelect from '@/views/components/VehicleModelSelect'
import PartSoftSelect from '@/views/components/PartSoftSelect'
import PartUpdateStateSelect from '@/views/components/PartUpdateStateSelect'
import TaskSelect from '@/views/components/TaskSelect'
import VehicleVersionSelect from '@/views/components/VehicleVersionSelect'
import { mapState } from 'vuex'
export default {
  components: {
    FilterBoxCollection,
    VehicleTypeSelect,
    VehicleModelSelect,
    PartSoftSelect,
    PartUpdateStateSelect,
    TaskSelect,
    VehicleVersionSelect
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.vehicle.vehicleEcuUpdateQuery
    }),
    partOptions () {
      const data = this.$store.state.vehicle.vehiclePartData.map(item => {
        return {
          id: item.ecuId,
          name: item.partNumber
        }
      })
      return [{ id: '', name: this.$t('all') }].concat(data)
    },
    activeVehicleId () {
      const activeVehicleData = this.$store.state.vehicle.vehicleDetail
      if (!activeVehicleData) {
        return ''
      }
      return activeVehicleData.id
    },
    partSoftQuery () {
      return {
        vehicleId: this.activeVehicleId
      }
    },
    ecuSelectQuery () {
      console.log(456)
      const activeVehicleData = this.$store.state.vehicle.vehicleDetail
      if (!activeVehicleData) {
        return { modelId: 'noModelId1111' }
      }
      return {
        modelIds: [activeVehicleData.modelId]
      }
    },
    vehicleVersionQuery () {
      const activeVehicleData = this.$store.state.vehicle.vehicleDetail
      if (!activeVehicleData) {
        return { modelId: 'noModelId1111' }
      }
      return { modelId: activeVehicleData.modelId }
    }
  },
  data () {
    return {
      updateInfoView: 'timeline'
    }
  },
  methods: {
    handleSearch () {
      this.$emit('search')
    },
    handleAdd () {
      this.$emit('handlecreate')
    },
    handleImport () {
      this.$emit('handleimport')
    },
    changeOption (val, key) {
      this.queryParams[key] = val
    },
    changeShowViewType () {
      let view = ''
      let comp = ''
      if (this.updateInfoView === 'timeline') {
        view = 'table'
        comp = 'CarModelDetailUpdateInfoTable'
      } else {
        view = 'timeline'
        comp = 'CarModelDetailUpdateInfoTimeline'
      }
      this.updateInfoView = view
      this.$emit('alertview', comp)
    },
    clearCondition () {
      this.$store.commit('resetVehicleEcuUpdateQuery')
      this.$emit('search')
    }
  }
}
</script>
<style lang="less">
.CarModelFotaSearchWrap {
  .productionYearRow {
  .ant-form-item-control {
    .ant-calendar-picker {
      width: 100%;
    }
    .ant-calendar-range {
      width: 100%;
    }
  }
}
.alterView {
    min-width: 15px;
    padding:0 10px;
    > i {
      font-size: 12px;
    }
  }
}

</style>
